<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>maple.js测试</title> 
<script src="maple.js"></script>
</head>
<body style="background-color:black">
    <div align="center" id="renderarea">
        <canvas id="drawscene" width="1000" height="600">
            您的浏览器不支持 HTML5 canvas 标签。
        </canvas>
    </div>
</body>
<script>
    var myscene = new scenesmanager("drawscene",1,false,false,true);
    myscene.isShowboundingBox = true;
	
	myscene.setSystemLogFunction(function(type,message){console.log(type+":"+message);});
	
    var tmpRect1 = myscene.addRectangle("矩形1",new rect(100,300,150,50),90.0); 
    tmpRect1.isFill = true;
    tmpRect1.isShowboundingBox = true;
	tmpRect1.setDraggable(true);
	tmpRect1.setBaseImage("https://cdn.pixabay.com/photo/2024/03/14/08/52/pug-8632718_1280.jpg");
	
    tmpRect1.mouseEvent = function(type,param1,param2) {
        if(type=="move"){
            tmpRect1.fillColor = "#ffff00";
			tmpRect1.scaleNode(1.5);
        }
        else if(type=="moveout"){
            tmpRect1.fillColor = "#00ffff";
			tmpRect1.scaleNode(1);
        }  	
    } 
	
    var tmpLine = myscene.addLine("线1",new point(150,125),new point(300,100));
    tmpLine.isShowboundingBox = false;
    tmpLine.lineWidth = 5;	
	tmpLine.setDraggable(true);
	tmpLine.setCornerRadius(13);
	
    tmpLine.mouseEvent = function(type,param1,param2) {
        if(type=="move"){
            tmpLine.strokeColor = "#ffff00";
			tmpLine.scaleNode(1.5);
        }
        else if(type=="moveout"){
            tmpLine.strokeColor = "#00ffff";
			tmpLine.scaleNode(1.0);
        }  
    }	
	
	let tmpangle = 60.0;
	
    var tmpRect2 = myscene.addRectangle("矩形2",new rect(243,316,150,50),tmpangle,"测试数据"); 
    tmpRect2.isFill = true;
    tmpRect2.isShowboundingBox = true;	
	//tmpRect2.showTip = true;
	//tmpRect2.setDraggable(true);
	tmpRect2.setTextColor("#ff00ff");
	tmpRect2.setFont("35px Calibri");	
    //tmpRect2.rotateNode(Math.random()*(360-0)+0);
	//tmpRect2.setBaseImage("https://cdn.pixabay.com/photo/2024/03/14/08/52/pug-8632718_1280.jpg");	
	tmpRect2.setCornerRadius(23);

    tmpRect2.mouseEvent = function(type,param1,param2) {
        if(type=="move"){
            tmpRect2.fillColor = "#ffff00";
			tmpRect2.scaleNode(1.5);
        }
        else if(type=="moveout"){
            tmpRect2.fillColor = "#00ffff";
			tmpRect2.scaleNode(1);
        }  
        else if(type=="down"){
			let tangle = Math.random()*(360-0)+0;
			tmpRect2.rotateNode(tangle);
			tmpRect2.setCaption("当前角度:"+tangle,true);			
        }	
    } 
	
    let tmppoints = [];
    tmppoints[0] = new point(500,200);
	tmppoints[1] = new point(400,300);
    tmppoints[2] = new point(400,500);
    tmppoints[3] = new point(600,500);
	tmppoints[4] = new point(600,300);
    var tmptriangle1 = myscene.addPolygon("三角形1",tmppoints,0.0);
    tmptriangle1.isFill = true;
    tmptriangle1.isShowboundingBox = true;	
	tmptriangle1.isdraggable = true;
	tmptriangle1.showTip = true;                        // 是否提示		
	tmptriangle1.caption = "我是一个多边形，哈哈";                           // 提示字符串	
	tmptriangle1.setBaseImage("https://cdn.pixabay.com/photo/2024/03/14/08/52/pug-8632718_1280.jpg");
	tmptriangle1.setCornerRadius(23);
	tmptriangle1.setScaleable(true);	
	
    tmptriangle1.mouseEvent = function(type,param1,param2) {
        if(type=="move"){
            tmptriangle1.fillColor = "#ffff00";
			//tmptriangle1.scaleNode(1.1);
        }
        else if(type=="moveout"){
            tmptriangle1.fillColor = "#00ffff";
			//tmptriangle1.scaleNode(1);
        } 		
        else if(type=="down"){
			//let tangle = Math.random()*(360-0)+0;
			//tmptriangle1.rotateNode(tangle);
			//tmptriangle1.setCaption("当前角度:"+tangle,true);			
        }			
    }	
	
    var tmpCircular = myscene.addCircular("圆1",new rect(400,100,50,50));
    tmpCircular.isShowboundingBox = true;
    tmpCircular.isFill = true;
	tmpCircular.setBaseImage("https://cdn.pixabay.com/photo/2024/03/14/08/52/pug-8632718_1280.jpg");

    tmpCircular.mouseEvent = function(type,param1,param2) {
        if(type=="move"){
            tmpCircular.fillColor = "#ff0000";
			tmpCircular.scaleNode(1.5);
        }
        else if(type=="moveout"){
            tmpCircular.fillColor = "#00ff00";
			tmpCircular.scaleNode(1);
        }
    } 
	
	tmpangle = 20.0;	

    let tmpText1 = myscene.addText("文本1",new point(100,200),"我是测试文本!",'56px Calibri',tmpangle);
    //tmpText1.isFill = true;
    //tmpText1.isShowboundingBox = true;
	tmpText1.isdraggable = true;
	//tmpText1.setBaseImage("https://cdn.pixabay.com/photo/2024/03/14/08/52/pug-8632718_1280.jpg");
	//tmpText1.setCornerRadius(13);
	
    tmpText1.mouseEvent = function(type,param1,param2) { 
        if(type=="move"){
            tmpText1.fillColor = "#ffff00";
			tmpText1.scaleNode(1.5);
        }
        else if(type=="moveout"){
            tmpText1.fillColor = "#00ffff";
			tmpText1.scaleNode(1);
        }	
    }
	
	let tmpImage = myscene.addImage("图片1",
									new rect(800,300,70,70),
									"https://cdn.pixabay.com/photo/2024/03/14/08/52/pug-8632718_1280.jpg",
									function(img,state){
										console.log(img.getBaseImage().width+" "+img.getBaseImage().height+":"+state);
										img.setBaseImageSrcRect(new rect(0,0,1280,800));
									},
									270.0);
	tmpImage.setCornerRadius(13);		
	tmpImage.setDraggable(true);	
									
    tmpImage.mouseEvent = function(type,param1,param2) { 
        if(type=="move"){
			tmpImage.scaleNode(1.5);
        }
        else if(type=="moveout"){
			tmpImage.scaleNode(1);
        }	
    } 									
	
</script>
</html>
